<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<script src="../js/vue.min.js"></script>
		<script src="../js/vant.min.js"></script>
		<link rel="stylesheet" href="../css/index.css" />
		<script src="../js/ajax.js"></script>
		<script src="html5plus://ready"></script>
		<script src="../js/listener_other.js"></script>
		<script type="text/javascript">
			
			document.addEventListener('plusready', function(){
				//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
				
			});
			
		</script>
		<title>个人资料</title>
	</head>
	<body> 
	
		

		<div id="app" style="display: flex; flex-direction: column;">
			<van-row style="background-color:orangered; color: #E8E8E8; height:100px;line-height:46px;padding-top: 3%;">
			<van-col span="4" offset="1" ><van-icon name="arrow-left" size="20px" style="margin-top: 29px;" @click="onClickLeft"/></van-col>
			  <van-col span="8" offset="4"><h3>添加地址</h3></van-col>
			    <van-col span="3" offset="3"><h3 @click="delet">删除</h3></van-col>
			</van-row>
			
			<van-address-list
			
			  v-model="chosenAddressId"
			  :list="list"
			  @edit="onEdit"
			   @add="onAdd"
			/>
				
			<van-dialog
			  v-model="showadd"
			  title="添加地址"
			  show-cancel-button
			 @confirm="confirm"
			 @cancel="cancel"
			>
			
			
			
				<van-row >
				  <van-col span="20" offset="2">
					  <van-cell-group>
					    <van-field
					  	v-model="username"
					  	clearable
					  	label="姓名"
					  	placeholder="请输入收货姓名"
					  	/> 
					  </van-cell-group>
				  </van-col>
				   <van-col span="20" offset="2">
				 		 <van-cell-group>
				 		  <van-field
				 			v-model="phone"
				 			clearable
				 			label="收货电话"
				 			placeholder="请输入收货电话"
				 			/> 
				 		</van-cell-group>
				 					  
				 </van-col>
				   <van-col span="20" offset="2">
				 		<van-cell-group>
				 			<van-field
				 				v-model="address"
				 				clearable
				 				label="地址"
				 				placeholder="请输入地址"
				 							 			/> 
				 		</van-cell-group>
				 </van-col>
				   <van-col span="20" offset="2">
				 		<van-cell-group>
						  <van-switch-cell active-color="green" v-model="checked" title="设为默认地址" />
						</van-cell-group>
				 </van-col>
				  
				 
				</van-row>
				
			</van-dialog>
			<van-dialog
			  v-model="showxiu"
			  title="添加地址"
			  show-cancel-button
			 @confirm="xiuconfirm"
			 @cancel="xiucancel"
			>
			
			
			
				<van-row >
				  <van-col span="20" offset="2">
					  <van-cell-group>
					    <van-field
					  	v-model="xiuname"
					  	clearable
					  	label="姓名"
					  	placeholder="请输入收货姓名"
					  	/> 
					  </van-cell-group>
				  </van-col>
				   <van-col span="20" offset="2">
				 		 <van-cell-group>
				 		  <van-field
				 			v-model="xiuphone"
				 			clearable
				 			label="收货电话"
				 			placeholder="请输入收货电话"
				 			/> 
				 		</van-cell-group>
				 					  
				 </van-col>
				   <van-col span="20" offset="2">
				 		<van-cell-group>
				 			<van-field
				 				v-model="xiuaddress"
				 				clearable
				 				label="地址"
				 				placeholder="请输入地址"
				 							 			/> 
				 		</van-cell-group>
				 </van-col>
				   <van-col span="20" offset="2">
				 		<van-cell-group>
						  <van-switch-cell active-color="green" v-model="xiuchecked" title="设为默认地址" />
						</van-cell-group>
				 </van-col>
				  
				 
				</van-row>
				
			</van-dialog>
			
			 
		</div>
		<script type="text/javascript">
			var key=localStorage.getItem("key");
		
			ajax({
			url:"http://dsapi.ysd3g.com/API/MyShippingAddressList",
			dataType:"JSONP",
			data:{
				key:key
			},
			success:function(res){
				console.log(res);
				
				for(var i=0;i<res.Data.length;i++){
					if(res.Data[i].IsDefault){
						vm.chosenAddressId=res.Data[i].id;
						console.log(res.Data[i].name);
					}
					vm.list.push(res.Data[i]);
					
				}
			},
			});
			var vm = new Vue({

				el: "#app",
				data: {
					chosenAddressId:'1',
					  areaList:"",
					  nmber:"",
					  showadd:false,
					  showxiu:false,
					  list:[
						   
					  ],
					  searchResult:[],
					  username:"",
					  phone:"",
					  address:"",
					  checked:false,
					  xiuname:"",
					  xiuphone:"",
					  xiuaddress:"",
					  xiuchecked:false,
					  xiuaddressid:""
					  
				},
				mounted:function(){
					if(localStorage.getItem("key")=="null"){
								alert('您还未登录');
					       
					       	plus.webview.open("../personcenter/denglu.html");
					       	plus.webview.close(plus.webview.currentWebview().id);
					}
						
				},
				methods: {
					onClickLeft: function() {
						plus.webview.close(plus.webview.currentWebview().id);
					},
					onAdd:function(){
						
						this.showadd=true;
					},
					onEdit:function(item, index) {
						
						console.log(vm.list[index]);
						vm.xiuaddress=vm.list[index].address;
						vm.xiuchecked=vm.list[index].IsDefault;
						vm.xiuname=vm.list[index].name;
						vm.xiuphone=vm.list[index].tel;
						vm.xiuaddressid=vm.list[index].id;
						
					        this.showxiu=true;
					
					},
					confirm:function(){
						var _this=this;
							ajax({
							url: "http://dsapi.ysd3g.com/API/AddShippingAddress",
							dataType:"jsonp",
							data: {
								key:localStorage.getItem("key"),
								name:_this.username,
								phone:_this.phone,
								address:_this.address,
								isdefault:_this.checked,
								districtCode:410502
								
							},
							"success": function(res) {
								vm.$toast.success("保存成功")
								var myself=plus.webview.currentWebview();
								myself.reload(true);
							}
						
						})
					},
					xiuconfirm:function(){
						var _this=this;
							ajax({
							url: "http://dsapi.ysd3g.com/API/EditShippingAddress",
							dataType:"jsonp",
							data: {
								key:localStorage.getItem("key"),
								name:_this.xiuname,
								phone:_this.xiuphone,
								address:_this.xiuaddress,
								isdefault:_this.xiuchecked,
								addressId:_this.xiuaddressid,
								districtCode:410502
								
							},
							"success": function(res) {
								
								if(res.Error){
									vm.$toast.success(res.Msg)
									console.log(res);
								}else{
									
									vm.$toast.success(res.Msg)
								
									var myself=plus.webview.currentWebview();
									myself.reload(true);
									
								}
								
							}
						
						})
					},
					xiucancel:function(){
						var myself=plus.webview.currentWebview();
						myself.reload(true);
					},
					cancel:function(){
						var _this=this;
						_this.username="";
						_this.phone="";
						_this.address="";
						_this.checked=""
					},
					delet:function(){
						
						ajax({
							url: "http://dsapi.ysd3g.com/api/DeleteShippingAddress",
							dataType:"jsonp",
							data: {
								key:localStorage.getItem("key"),
								addressId:vm.chosenAddressId
								
								
							},
							"success": function(res) {
								
								if(res.Error){
									vm.$toast.success(res.Msg)
									console.log(res);
								}else{
									
									vm.$toast.success("删除成功");
								
									var myself=plus.webview.currentWebview();
									myself.reload(true);
									
								}
								
							}
						
						})
					}
					
				}

			});
		</script>
	</body>
</html>